<template>
  <link rel="stylesheet" href="@/styles/snapped.css">
  <div style="background-color: rgb(243, 243, 243)">
    <van-nav-bar
      title="抢购页面"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- price="2.00" num="2"-->
    <van-card
      title="2人招牌套餐"
      thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
      price-top    
    >
      <template #tags>
        <van-tag plain type="primary" style=" font-size: 13px;margin-top: 16px"
          >周一周至五</van-tag
        ><br />
        <van-tag plain type="primary" style="margin-top: 6px; font-size: 13px"
          >免预约 | 临时退 | 过期自动退</van-tag
        >
        <span class="price" style="margin-left: 55px">price</span>
      </template>
    </van-card>
    <div class="num">
      <span>数量</span>
      <van-stepper
        v-model="value"
        theme="round"
        button-size="22"
        disable-input
      />
    </div>
    <div class="num">
      <span>小计</span>
      <span style="color: orange">￥***</span>
    </div>

    <div class="num" style="margin-top: 10px">
      <van-cell
        is-link
        title="抵用券"
        @click="show1 = true"
        style="font-size: 16px"
      />
      <van-action-sheet
        v-model:show="show1"
        :actions="actions"
        @select="onSelect"
      />
    </div>

    <div class="num">
      <span>实付金额</span>
      <span style="color: orange">￥***</span>
    </div>
    <div class="num" style="margin-top: 10px">
      <span>手机号</span>
      <span>158***8754</span>
    </div>

    <van-button
      style="margin-top: 115px"
      icon-position="right"
      type="warning"
      size="large"
      @click="showPopup"
      >￥*** 立即付款</van-button
    >
     
    <van-popup
      v-model:show="show"
      closeable
      close-icon-position="top-left"
      position="bottom"
      :style="{ height: '424px' }"
    >
     <div class="box1">确认付款</div>
     <div class="box2">￥25.00</div>
     <div class="box3"><li>订单信息</li><li>小鲍糕点站2人招牌套餐</li></div>
     <div class="box4"><li>付款方式</li><li>余额宝</li></div>
     <div class="box5"><li>花呗最高立减十元</li><li>立即使用</li></div>
     <div class="box6">
      <van-button
      style="width: 95%;margin-top: 110px;"
      icon-position="right"
      type="warning"
      size="large"
      >￥*** 立即付款</van-button
    >
     </div>
     
    </van-popup>
  </div>
</template>


<script setup>
import { ref } from "vue";
const onClickLeft = () => history.back();
const show = ref(false);
const showPopup = () => {
  show.value = true;
};

const show1 = ref(false);
const actions = [{ name: "卡卷一" }, { name: "卡卷二" }, { name: "卡卷三" }];
const onSelect = (item) => {
  // 默认情况下点击选项时不会自动收起
  // 可以通过 close-on-click-action 属性开启自动收起
  show1.value = false;
  showToast(item.name);
};
</script>

<style lang="scss" scoped>
li{
  list-style: none;
}
.van-tag--plain:before {
  border: 0;
  color: gray;
}
.van-tag--primary.van-tag--plain {
  color: gray;
}
.van-card{
  background-color: white;
  margin-top:-1px ;
  position: relative;
}
.price {
    margin-left: 55px;
    position: absolute;
    top: 30px;
}
.num {
  background-color: white;
  border-top: 2px solid rgb(243, 243, 243);
  height: 70px;
  line-height: 70px;
  display: flex;
  justify-content: space-between;
  padding: 30px;
}
.num span {
  font-size: 30px;
}

.van-popup div{
  justify-content: space-between;
  padding: 20px;
}
.van-popup{
  text-align: center;
}
.van-popup .box1 {
  
  height: 60px;
  text-align: center;
   line-height:60px ;
}
.van-popup .box2{
  font-size: 80px;
  height:90px;
  text-align: center;
   line-height:90px ;
   border-top: 1px solid gray ;
   padding: 20px;
}
.van-popup .box3{
  border-bottom: 1px solid gainsboro;
  display: flex;
  font-size: 30px;
  height:42px;
  line-height:42px ;
}
.van-popup .box4{
  display: flex;
  border-bottom: 1px solid gainsboro;
  font-size: 30px;
  height:42px;
  line-height:42px ;
}
.van-popup .box5{
  display: flex;
  font-size: 30px;
  height:44px;
  line-height:44px ;
  border-bottom: 1px solid gainsboro;
}
.van-popup .box5 li:nth-child(2){
  border: 1px solid gray;
  font-size: 12px;
  color:  gray;
}
.van-popup .box5 li:nth-child(1){
   font-weight: 600;
}
.van-popup .box3 li:nth-child(2){
   font-weight: 600;
}
.van-popup .box4 li:nth-child(2){
   font-weight: 600;
}
.van-popup .box6{
  text-align: center;

}
</style>